
<template>
    <div ref="videodom"></div>
</template>

<script setup>
import { nextTick, ref } from 'vue'
const emit = defineEmits(['fun'])
import Player from 'xgplayer';
import { Events } from 'xgplayer'
import FlvPlugin from 'xgplayer-flv'
import Mp4Plugin from "xgplayer-mp4"
import HlsPlugin from 'xgplayer-hls'
import 'xgplayer/dist/index.min.css';
const videodom = ref()
const player = ref()

const init = (url,option) => {
    const plugins = () => {
        if(url.endsWith('.flv')){
            return [FlvPlugin]
        }
        if(url.endsWith('.mp4')){
            return [Mp4Plugin]
        }
        if(url.endsWith('.m3u8')){
            return [HlsPlugin]
        }
    }
    player.value = new Player({
        el: videodom.value,
        url,
        plugins: plugins(),
        height: '100%',
        width: '100%',
        autoplay: true,
        playbackRate: {
            list: [
                { text: '0.5X', rate: 0.5 }, 
                { text: '0.75X', rate: 0.75 }, 
                { text: '1X', iconText: '倍速', rate: 1 }, 
                { text: '1.5X', rate: 1.5 },
                { text: '2X', rate: 2 }
            ],
            hidePortrait: true
        },
        ...option
    });
    // player.value.on(Events.READY, (e)=>{
        //EVENTS.READY	ready	无	播放器完成实例化
    // })
    player.value.on(Events.LOAD_START, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.LOADED_DATA, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.PLAY, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.PAUSE, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.ENDED, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.ERROR, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.SEEKING, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.SEEKED, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.TIME_UPDATE, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.WAITING, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.CANPLAY, (e)=>{
        emit('fun',e)
    })
    player.value.on(Events.RATE_CHANGE, (e)=>{
        emit('fun',e)
    })
}
defineExpose({
    init,
    player:player
})
</script>


<style scoped>
</style>
